<template>
  <el-dialog :visible.sync="visible"
    custom-class="dialog-detail"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    @close="onDialogClose"
    :append-to-body="false"
    width="540px">
    <template v-if="!hasConfirm">
      <el-form :model="form" ref="invoiceFrom" :rules="rules" label-width="64px">
        <el-form-item label="订单" prop="order_id">
          <el-select
            @change="orderChange"
            size="medium"
            v-model="form.order_id"
            popper-class="invoice-popper"
            placeholder="请选择订单"
            no-data-text="暂无可用订单"
            :popper-append-to-body="false">
            <template v-for="item in orderList">
              <el-option
                :key="item.order_id"
                :value="item.order_id"
                :label="`${item.order_id}  ${item.title}`"
                v-if="[1, 2, 3, 7, 8].indexOf(item.invoice_status) === -1">
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <span class="amount-box">￥{{parseFloat(form.amount/100)}}</span>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoice_type">
          <el-radio-group v-model="form.invoice_type" @change="invoiceTypeChange">
            <el-radio :label="26">普通发票</el-radio>
            <el-radio :label="27">专用发票</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开票主体" prop="invoice_issuer">
          <el-radio-group v-model="form.invoice_issuer">
            <el-radio :label="2">公司</el-radio>
            <el-radio v-if="form.invoice_type === 26" :label="1">个人</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="form.invoice_issuer === 2">
          <el-form-item label="公司名称" prop="company_name" key="company_name">
            <el-input placeholder="请输入公司名称" v-model.trim="form.company_name" size="medium" :maxLength="128" />
          </el-form-item>
          <el-form-item label="税号" prop="tax_number" key="tax_number">
            <el-input placeholder="请输入税号" v-model.trim="form.tax_number" size="medium" :maxLength="30" />
          </el-form-item>
        </template>
        <el-form-item v-if="form.invoice_issuer === 1" label="个人姓名" prop="personal_name" key="personal_name">
          <el-input placeholder="请输入个人姓名" v-model.trim="form.personal_name" size="medium" :maxLength="128" />
        </el-form-item>

        <el-form-item label="收票邮箱" prop="email">
          <el-input placeholder="请输入收票邮箱" v-model.trim="form.email" size="medium" :maxLength="256" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input placeholder="请输入地址" v-model.trim="form.address" size="medium" :maxLength="256" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input placeholder="请输入电话" v-model.trim="form.phone" size="medium" :maxLength="17" />
        </el-form-item>

        <template v-if="form.invoice_issuer === 2">
          <el-form-item label="开户银行" prop="bank">
            <el-input placeholder="请输入开户银行" v-model.trim="form.bank" size="medium" :maxLength="64" />
          </el-form-item>
          <el-form-item label="银行账户" prop="bank_account">
            <el-input placeholder="请输入银行账户" v-model.trim="form.bank_account" size="medium" :maxLength="30" />
          </el-form-item>
        </template>

        <el-form-item label="备注" prop="remark">
          <el-input placeholder="请输入备注" v-model.trim="form.remark" size="medium" :maxLength="256"/>
        </el-form-item>
      </el-form>
      <div class="confirm-footer">
        <el-button class="btn-confirm" :loading="exchangeLoading" @click="confirm">提交</el-button>
      </div>
    </template>
    <template v-else>
      <div class="hasConfirm-box">
        <img src="@/assets/has-confirm.svg">
        <p>您的开票需求已提交!</p>
        <p>我们将在5-7个工作日为您处理好</p>
      </div>
      <div class="confirm-footer">
        <el-popover
          placement="bottom"
          popper-class="colour-skin"
          width="190"
          trigger="click">
          <img src="@/assets/code-customer-service.png" class="vip-code-img" />
          <p class="vip-code-text">提交开票申请遇到问题？</p>
          <p class="vip-code-text">可添加客服微信咨询哦</p>
          <el-button slot="reference" class="btn-default">联系客服</el-button>
        </el-popover>
        <el-button class="btn-default ml20" @click="onDialogClose">关闭窗口</el-button>
      </div>
    </template>
    <el-button type="text" class="btn-bottom" @click="openRecordDialog">发票记录</el-button>
    <!-- 发票记录弹窗 -->
    <invoiceRecordDialog :showRecordVisible.sync="showRecordDialog" @close="closeRecordDialog"/>
    <!-- 合作方提示弹窗 -->
    <invoiceContactDialog :showContactVisible.sync="showContactDialog" @close="closeContact"/>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import invoiceRecordDialog from './invoice-record-dialog.vue'
import invoiceContactDialog from './invoice-contact-dialog.vue'
import { applyInovice, orderListApi } from '@/api/order'
export default {
  name: 'InvoiceFromDialog',
  components: {
    invoiceRecordDialog,
    invoiceContactDialog
  },
  props: {
    row: Object,
    visibleShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hasConfirm: false,
      showContactDialog: false,
      showRecordDialog: false,
      exchangeLoading: false,
      orderList: [],
      form: {
        order_id: '',
        amount: 0,
        invoice_type: 26,
        invoice_issuer: 2,
        personal_name: '',
        company_name: '',
        email: '',
        address: '',
        phone: '',
        remark: '',
        tax_number: '',
        bank: '',
        bank_account: ''
      },
      rules: {
        order_id: [
          { required: true, message: '请选择订单', trigger: 'change' }
        ],
        amount: [{ required: true, message: '', trigger: 'node' }],
        invoice_type: [{ required: true, message: '请选择', trigger: 'change' }],
        invoice_issuer: [{ required: true, message: '请选择', trigger: 'change' }],
        company_name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        tax_number: [{ required: true, message: '请输入税号', trigger: 'blur' }],
        personal_name: [{ required: true, message: '请输入个人姓名', trigger: 'blur' }],
        email: [{ required: true, type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
        phone: [{
          validator: (rule, value, callback) => {
            if (/^((\+86)|(0086))?(1)\d{10}$/.test(value) || /^0\d{2,3}-\d{7,8}(-\d{3})?$/.test(value)) {
              callback()
            } else {
              callback(new Error('请输入正确的电话号码'))
            }
          },
          message: '请输入正确的电话号码',
          trigger: 'blur'
        }],
        bank_account: [{ pattern: /^[A-Za-z0-9]+$/, message: '请输入正确的银行账户', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    visible: {
      get () {
        return this.visibleShow
      },
      set (val) {
        this.$emit('update:visibleShow', val)
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getList()
        this.hasConfirm = false
        this.form.order_id = this.row?.order_id || ''
        this.form.amount = this.row?.pay_price || 0
        this.$nextTick(() => {
          // eslint-disable-next-line no-unused-expressions
          this.$refs.invoiceFrom?.clearValidate()
        })
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    confirm () {
      this.exchangeLoading = true
      this.$refs.invoiceFrom.validate(async (valid) => {
        if (valid) {
          applyInovice(this.form).then(res => {
            this.hasConfirm = true
          }).finally(() => {
            this.exchangeLoading = false
          })
        } else {
          this.exchangeLoading = false
        }
      })
    },
    orderChange () {
      this.form.amount = this.orderList.filter(item => item.order_id === this.form.order_id)[0]?.pay_price
      const is_partner = this.orderList.filter(item => item.order_id === this.form.order_id)[0]?.is_partner
      if (is_partner) {
        this.showContactDialog = true
      }
    },
    invoiceTypeChange () {
      this.form.invoice_issuer = 2
    },
    onDialogClose () {
      this.$emit('close')
    },
    openRecordDialog () {
      this.showRecordDialog = true
    },
    closeContact () {
      this.form.order_id = ''
      this.form.amount = 0
      this.showContactDialog = false
    },
    closeRecordDialog () {
      this.showRecordDialog = false
    },
    resetFields () {
      this.$refs.phoneForm.resetFields()
    },
    getList () {
      orderListApi({ page: 1, page_size: 100, status: 2 }).then(res => {
        this.orderList = res?.data?.list || {}
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .dialog-detail {
  height: 84vh;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  border: 1px solid #e1e1e1;
  padding: 10px 0;
  position: relative;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: rgba(51, 51, 51, .7);
  }
  .el-dialog__body {
    padding: 34px 74px;
    color: #333333;
  }

  .el-form-item {
    margin-bottom: 14px;
  }
  .el-form-item__label {
    color: #333333;
    padding: 0 16px 0 0;
    font-size: 12px;
    text-align-last: justify;
  }
  .el-input__inner {
    border: 1px solid rgba(51, 51, 51, 0.2);
    background: #ffffff;
    color: #333333;
    font-size: 12px;
    &::placeholder{
      color:rgba(51, 51, 51, .3);
    }
    &:hover, &:focus {
      border-color: #00BBD7;
    }
  }
  .is-error .el-input__inner {
    border-color: #ff6565;
    &:hover, &:focus {
      border-color: #ff6565;
    }
  }
  .el-select .el-input__inner {
    color: #333333;
  }
  .el-input {
    width: 320px;
    font-size: 12px;
  }
  .confirm-footer {
    text-align: center;
  }
  .btn-confirm {
    width: 188px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background: #00B8E6;
    border-radius: 6px;
    margin-top: 6px;
    &:hover {
      background: #00A9D3;
    }
  }
  .btn-bottom {
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: #333333;
    font-size: 12px;
    padding: 0;
    &:hover {
      color: #00BBD7;
    }
  }

  .ml20 {
    margin-left: 20px;
  }
  .hasConfirm-box {
    text-align: center;
    img {
      width: 80px;
      height: 80px;
      margin: 100px auto 12px;
    }
    p {
      font-size: 14px;
      opacity: 0.7;
      text-align: center;
    }
  }
  .btn-default {
    width: 160px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    margin-top: 40px;
    color: #333333;
    &:hover {
      background: rgba(0,0,0,0.1);
    }
  }
  ::-webkit-scrollbar {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.4);
  }

  .el-radio {
    color: #333333;
  }
  .el-radio__inner {
    border: 1px solid #B3B3B3;
    &::after {
      -webkit-transition: none !important;
      transition: none !important;
      transition: none !important;
      transition: none !important;
    }
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #00B8E6;
    background: #00B8E6;
  }
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    display: none;
  }
  .el-form-item.is-required:not(.is-no-asterisk) {
    position: relative;
    &::before {
      font-size: 12px;
      content: '*';
      color: #ff6565;
      position: absolute;
      top: 14px;
      left: -8px;
    }
  }
}

.vip-code-img{
  width: 110px;
  height: 110px;
  margin-bottom: 6px;
}
.vip-code-text{
  font-size: 12px;
  line-height: 16px;
}
.amount-box {
  display: inline-block;
  width: 320px;
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  background: rgba(0,0,0,0.03);
  border-radius: 4px 4px 4px 4px;
}

/deep/ .invoice-popper{
  background-color: #fff;
  border: none;
  position: absolute !important;
  top: 36px !important;
  left: 0 !important;
  .el-select-dropdown__empty{
    color: #666;
  }
  .el-select-dropdown__item{
    color: #666;
    &:hover{
      background-color: rgba(0, 0, 0, 0.1);
    }
    &.selected{
      color: #00BBD7;
    }
  }
  ::-webkit-scrollbar {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.4);
  }
}
</style>
